<!--
@author  tanyuze
@desc    新建/编辑云展馆
@date    2022/12/1
-->
<template>
  <div class="pavilion-manage">
    <div class="pavilion-manage-title">新建/编辑云展馆</div>
    <section v-loading="loading" class="pavilion-manage-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form">

        <el-form-item label="名称" prop="mainTitle">
          <el-input v-model="form.mainTitle" placeholder="请输入展馆名称" />
        </el-form-item>
        <el-form-item label="展馆分类" prop="newsType ">
          <el-cascader
            ref="classify"
            v-model="form.newsType "
            style="width: 100%"
            clearable
            :props="createClassifyProps"
            :options="classifyOptions"
          />
        </el-form-item>
        <el-form-item label="展示类型" prop="showType">
          <el-select
            v-model="form.showType"
            placeholder="请选择展示类型"
            clearable
            :style="{ width: '100%' }"
            @change="changeShowType"
          >
            <el-option
              v-for="(item, index) in dict.ZSXS"
              :key="index"
              :label="item.dictName"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if=" form.showType!=='ZSXS_TWHPBTYS'"
          label="引导图"
          prop="coverImgId"
          required
          class="guideImg"
        >
          <image-upload
            v-model="form.coverImgId"
            :preview-id="uploadFile.viewId"
            :forever="true"
            :width="228"
            :view="uploadFile.view"
            :height="148"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadFile.isOss"
            @changeOssPath="
              (path) => {
                uploadFile.viewId = path;
              }
            "
          />
        </el-form-item>
        <el-form-item
          v-if="form.showType == 'ZSXS_TWHPBTYS'"
          label="大图模式封面"
          prop="bigCoverImgId"
          required
        >
<!--          :same-size-icon="true"-->
          <image-upload-list
            v-model="form.bigCoverImgId"
            :multiple="true"
            :width="654"
            :height="368"
            :img-list.sync="imgIdList1"
            text-tips="上传"
          />
        </el-form-item>
        <el-form-item label="展馆类型" prop="param2" class="exhibition">
          <el-select
            v-model="form.param2"
            placeholder="请选择展馆类型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dict.ZGLX"
              :key="index"
              :label="item.dictName"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker
            v-model="form.publishTime"
            type="date"
            placeholder="选择发布时间"
            style="width: 100%"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>

        <el-form-item label="链接地址" prop="param1">
          <el-input v-model="form.param1" placeholder="请输入链接地址" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            v-model.number="form.sort"
            placeholder="请输入排序号（值越大，越靠前）"
          />
        </el-form-item>

      </el-form>
    </section>
    <section class="pavilion-manage-footer">
      <el-button style="padding: 10px 30px;" @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit('form')">确 定</el-button>
    </section>

  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import ImageUploadList from '../components/ImageUploadList'
import { insert, update, get, getDictByCode,fetchList } from '../api'
export default {
  name: 'CloudPavilionManage',
  components: { ImageUpload, ImageUploadList },
  data() {
    return {
      createClassifyProps: {
        label: 'classifyName',
        value: 'id',
        checkStrictly: true
      },
      loading: false,
      state: false,
      classifyOptions: [],
      showClassify: false,
      form: {
        newsType : [],
        mainTitle: '',
        coverImgId: '',
        publishTime: '',
        param1: '',
        sort: '',
        showType: '',
        param2: '',
        bigCoverImgId: ''
      },
      dict: {
        ZSXS: [
          { dictName: '左文右图样式',
            dictValue: 'ZSXS_ZWYTYS' },
          { dictName: '右文左图样式',
            dictValue: 'ZSXS_YWZTYS' },
          { dictName: '图文混排-大图样式',
            dictValue: 'ZSXS_TWHPBTYS' }
        ], // 样式
        ZGLX: []
      },
      rules: {
        mainTitle: [
          { required: true, message: '请输入展馆名称', trigger: 'blur' }
        ],
        coverImgId: [
          { required: true, message: '请上传引导图', trigger: 'change' }
        ],
        publishTime: [
          { required: true, message: '请选择发布时间', trigger: 'change' }
        ],
        param1: [
          { required: true, message: '请输入链接地址', trigger: 'blur' }
        ],
        showType: [
          { required: true, message: '请选择展示类型', trigger: 'change' }
        ],
        param2: [
          { required: true, message: '请选择展馆类型', trigger: 'change' }
        ]
      },
      uploadFile: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0,
        showUpload: -1, // 1视频 2图片 3附件
        accept: '',
        fileType: '',
        fileIndex: 0,
        isOss: !!sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG')
      },
      imgIdList1: []
    }
  },
  created() {
    this.getClassifyOption()
    this.state = this.$route.query.type === 'u' ? 'update' : 'create'
    if (this.$route.query.type === 'u') {
      if (!this.$route.query.i) {
        this.$message({
          showClose: true,
          message: '参数异常！',
          type: 'warning',
          onClose: () => {
            this.handleCancel()
          }
        })
      } else {
        this.form.id = this.$route.query.i
        this.get(this.$route.query.i)
      }
    }
    for (const key in this.dict) {
      if (key !== 'ZSXS') {
        this.getDict(key)
      }
    }
  },
  methods: {
    /**
     * 获取分类
     */
     getClassifyOption() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        fetchList({ classifyType: 'XWFL_YZG' })
          .then(({ data }) => {
            loading.close()
            this.classifyOptions = data.data || []
            resolve()
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },
    /**
     * 字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code)
          .then((response) => {
            this.dict[code] = response.data.data[0].list
            resolve()
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    changeShowType() {},
    /*
    * 根编辑回显
    * */
    get(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: id })
          .then((res) => {
            loading.close()
            const data = res.data.data
            for (const key in this.form) {
              this.form[key] = data[key]
            }
            console.log(data.coverImgIdUrl, 11)
            this.uploadFile.viewId = data.coverImgIdUrl
            // 多大图
            if (data.showType == 'ZSXS_TWHPBTYS') {
              const arrS = data.bigCoverImgId.split(',') || []
              this.imgIdList1 = []
              arrS.forEach((item) => this.imgIdList1.push({ url: this.uploadFile.view + item, id: item }))
            }
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },

    handleSubmit() {
      if (this.state === 'create') {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.3)'
            })
            const params = Object.assign({}, this.form)
            params.newsType  = this.form.newsType [this.form.newsType .length - 1]
            return new Promise((resolve, reject) => {
              insert(params).then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
                this.handleCancel()
              })
                .catch((error) => {
                  reject(error)
                  loading.close()
                })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.3)'
            })
            const params = Object.assign({}, this.form)
            params.newsType  = this.form.newsType [this.form.newsType .length - 1]
            return new Promise((resolve, reject) => {
              update(params).then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
                this.handleCancel()
              })
                .catch((error) => {
                  reject(error)
                  loading.close()
                })
            })
          } else {
            return false
          }
        })
      }
    },

    handleCancel() {
      this.$router.back()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.pavilion-manage{
  overflow: hidden;
  background-color: #FFFFFF;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);

  .pavilion-manage-title{
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .pavilion-manage-main{
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding:  0 10px;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }

    .form {
      width: 1000px !important;
      margin: 0 auto;

      .el-select {
        width: 100%;
      }

      .line {
        text-align: center;
      }

      .config-condition{
        &:after {
          content: '*观看/收听任意资源都可完成打卡';
          position: absolute;
          @include  font-color($mainColor);
          top: 40px;
          right: 10px;
          font-weight: bold;
          font-size: 12px;
        }
      }
      .config-condition-other{
        &:after {
          content: '*完成任意次数的通关即可完成打卡';
          position: absolute;
          @include  font-color($mainColor);
          top: 40px;
          right: 10px;
          font-weight: bold;
          font-size: 12px;
        }
      }
      .guideImg {
        margin-bottom: 25px;
        .el-form-item__content {
          .el-form-item__error {
            margin-top: 6px;
          }
        }
      }
      .exhibition {
        margin-top: 2px;
      }
    }
  }

  .pavilion-manage-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
